<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 
 <title>Happy Birthday</title>
 <link rel="stylesheet" href="../css/jquery.fullPage.css">
 <link rel="stylesheet" href="../css/style.css">
</head>

<body>
<div class="bgcolor">
	<div style="z-index:100;" id="dowebok">
     <!--第一屏 X1-->
     <div class="section">
          <div class="ly-box01">
			<div class="ly-txt01">
				<p class="ly-stxt01">我们认识的时间不长</p>
				<p class="ly-stxt02">只有短短的68天</p>
				<p class="ly-stxt03">但是我们之间的点点滴滴</p>
				<p class="ly-stxt04">历历在目</p>
				<p class="ly-stxt05">仿佛就像在昨天一样</p>
			</div>
            <div class="ly-txt02">
              <p class="ly-stxt06">但是呢</p>
              <p class="ly-stxt07">时间在往前走</p>
              <p class="ly-stxt08">慢慢的就到了你的生日</p>
              <p class="ly-stxt09">祝你:</p>
              <p class="ly-stxt10">生日快乐!</p>
            </div>
        </div>
      </div>

      <!--第二屏 X2-->
    <div class="section">
          <div class="timeline"></div>
          <div class="timepoint11"></div>
		  
          <div class="ly-box11">
              <div class="ly-txt11" style="width:100%;height:10%;left:10%">
                <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
              </div>
              <div class="ly-txt12"></div>
              <div class="ly-imgbox13" style="height:80%">
                <img class="ly-img13" src="../img/caketoface.jpg" style="height:100%">
              </div>
          </div>
		  
          <div class="ly-triangle11"></div>

          <div class="ly-box12">
              <div class="ly-txt13" style="width:100%;height:10%;left:10%">
                  <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
              </div>
              <div class="ly-txt14">
                 <p>宇宙超模XX</p>
			     <p>我祝你所有的愿望都能成真</p>
			     <p>所有的梦想都能实现</p>
			     <p>所有的等候都能出现</p>
				 <p>所有所有所有的一切都能如你所愿</p>
              </div>
			  
              <div class="ly-imgbox13" style="height:50%">
                <img class="ly-img13" src="../img/2_right.jpg" style="height:100%">
              </div>
			  
          </div>
          <div class="ly-triangle12"></div>

      </div>

	<!-- 第三屏X3 -->
	<div class="section">
		<!-- 左动画 -->
		<div class="timeline"></div>
		<div class="timepoint21"></div>
		
		<!-- 第一栏 -->
		<div class="ly-box52">
			<div class="ly-txt21">
				虽然
			</div>
			<div class="ly-txt22">
				<p>我们相处的时间不多</p>
				<p>你还经常生我的气</p>
				<p>总说</p>
				<p>我对你不好</p>
				<p>冷漠</p>
				<p>套路你</p>
			</div>
			<div class="ly-imgbox21">
				<img class="ly-img21" src="img/2015.01.01-1.jpg">
			</div>
		</div>
		<div class="ly-triangle21"></div>
		<div class="ly-box22">
			
		<!-- 第二栏 -->
		<div class="ly-txt23">
			但是呢
		</div>
		<div class="ly-txt51">
			<p>我也在很努力地</p>
			<p>改变着自己</p>
			<p>想让你不再生气</p>
			<p>有什么好东西都想</p>
			<p>跟你分享</p>
			<p>记得过年的时候</p>
			<p>我还把我唯一的</p>
			<p>一张花花卡给了你</p>
			<p>看我对你多好</p>
			<p>而且</p>
			<p>我从来都没有套路你</p>
		</div>
		</div>
		<div class="ly-triangle22"></div>

		<!-- 第三栏 -->
		<div class="ly-box51">
			<div class="ly-txt25">
			还有
			</div>
			<div class="ly-imgbox13X" style="height:50%">
				<img class="ly-img13X" src="../img/rabbit.png" style="height:100%">
			</div>
		</div>
		<div class="ly-triangle23"></div>
	</div>

	<!-- 第四屏X4 -->
	<div class="section">
			<div class="timeline"></div>
			<div class="timepoint11"></div>
			<div class="ly-box8X">
				<div class="ly-txt11" style="width:100%;height:5%;left:10%">
					<img class="ly-img11" src="../img/HappyBirthday.png" style="width:200%;height:200%">
				</div>
				<div class="ly-txt82">
					<p>我们</p>
					<p>约好了</p>
					<p>一起去旅游</p>
					<p>一起攒钱</p>
					<p>一起去办签证</p>
					<p>一起去坐飞机</p>
					<p>约好了</p>
					<p>一起去冰岛</p>
					<p>西藏</p>
					<p>云南</p>
					<p>...</p>
				</div>
	        </div>
	         <div class="ly-triangle11"></div>
	
	         <div class="ly-box82">
	             <div class="ly-txt13" style="width:100%;height:10%;left:10%">
	                 <img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
	             </div>
	             <div class="ly-txt84">
	                <p class="wwww1">如果</p>
					 <p class="wwww1">如果未来某天</p>
					 <p class="wwww1">我们真的走在了一起</p>
					 <p class="wwww1">那么祝贺我们</p>
					 <p class="wwww1">到时候我就跟着你一起去外面浪</p>
					 <p class="wwww1">养一条宠物犬</p>
					 <p class="wwww1">看谁不爽就去咬谁</p>
					 <p class="wwww1">饿了给你做甜点</p>
					 <p class="wwww1">累了给你按摩</p>
					 <p class="wwww1">没有烦恼</p>
					 <p class="wwww1">快乐过日子</p>
	             </div>
	             <div class="ly-imgbox11" style="height:50%;">
	               <img class="ly-img11" src="../img/fly2.gif" style="height:80%">
	             </div>
	         </div>
	         <div class="ly-triangle82"></div>
	 </div>
	
	<!-- 第五屏X5 -->
	<div class="section">
		<div class="timeline"></div>
		<div class="timepoint11"></div>
		<div class="ly-box81">
			<div class="ly-txt11" style="width:100%;height:10%;left:10%">
				<img class="ly-img11" src="../img/HappyBirthday.png" style="width:200%;height:200%">
			</div>
			<div class="ly-txt82" style="top:8%">
				<p class="wwww1">do{</p>
				<p class="wwww1">i++;</p>
				<p class="wwww1">u++;</p>
				<p class="wwww1">}while(i & u);</p>
			<p class="wwww1"></p>
		</div>
		</div>
		<div class="ly-triangle11"></div>

		<div class="ly-box82">
			<div class="ly-txt13" style="width:100%;height:10%;left:10%">
				<img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
			</div>
			<div class="ly-txt84">
				<p>就像左面这个程序一样</p> 
				<p>你和我原本就是两个世界的人</p>
				<p>一直都在不停的往前走</p>
				<p>直到有一天在某一刻相遇</p>
				<p>我们才在彼此的世界里相拥</p>
				<p>然后追寻着各自的梦想</p>
				<p>却又活在我们自己的天空下</p>
				<p>和你手牵着手共同的走下去</p>
				<p>就像这跳不出的循环</p>
				<p>直到永远</p>
				<p>73、76、79、86、69、85</p>
				<p style="font-size: 13px">这也许,是我能送给你最后的东西了吧? By XXX</p>
			</div>
			<div class="ly-imgbox12" style="">
				<img class="ly-img12" src="../img/fly6.jpeg" style="height:100%">
			</div>
		</div>
		<div class="ly-triangle82"></div>
	</div>
</div>
	   
	
	   
	<!--飞起来的气泡-->
	<ul class="bg-bubbles">
		<li><img src="../img/fly1.jpg" style="width:100%;height:100%"></li>
		<li><img src="../img/fly2.gif" style="width:100%;height:100%"></li>
		<li><img src="../img/fly3.jpg" style="width:100%;height:100%"></li>
		<li><img src="../img/fly4.gif" style="width:100%;height:100%"></li>
		<li><img src="../img/fly5.png" style="width:100%;height:100%"></li>
		<li><img src="../img/fly6.jpeg" style="width:100%;height:100%"></li>
		<li><img src="../img/fly1.jpg" style="width:100%;height:100%"></li>
		<li><img src="../img/fly2.gif" style="width:100%;height:100%"></li>
		<li><img src="../img/fly3.jpg" style="width:100%;height:100%"></li>
		<li><img src="../img/fly6.jpeg" style="width:100%;height:100%"></li>
	</ul>
    
  </div>
  <audio src="../music/ymlhappy1.mp3" autoplay="autoplay" loop="loop">

<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery.fullPage.min.js"></script>
<script src="../js/diy.js"></script>
</body>
</html>